<template>
  <div v-loading="loading">
    <a-form-model ref="smsForm" :rules="rules" :model="sms" :labelCol="{ span: 3 }" :wrapperCol="{ span: 12 }">
      <a-form-model-item label="阿里云AccessKeyId" prop="id">
        <a-input v-model="sms.id" />
      </a-form-model-item>
      <a-form-model-item label="阿里云AccessKeySecret" prop="secret">
        <a-input v-model="sms.secret" />
      </a-form-model-item>
      <a-form-model-item label="模板签名" prop="template">
        <a-input v-model="sms.template" />
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{ span: 24 }">
        <a-divider style="margin: 0 0 40px 0" />
        <div style="display: flex; justify-content: center">
          <a-button :loading="btnLoading" type="primary" @click="submitForm" style="margin-right: 8px"> 保存 </a-button>
          <a-button @click="$router.back()"> 取消 </a-button>
        </div>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
import { setSmsSetting, getSmsSetting } from '@/api/saas/setting'

export default {
  name: 'SaasSettingSms',
  data () {
    return {
      loading: false,
      btnLoading: false,
      sms: {
        id: '',
        secret: '',
        template: ''
      },
      rules: {
        id: [{ required: true, message: '请输入阿里云AccessKeyId', trigger: 'blur' }],
        secret: [{ required: true, message: '请输入阿里云AccessKeySecret', trigger: 'blur' }],
        template: [{ required: true, message: '请输入阿里云模版签名', trigger: 'blur' }]
      }
    }
  },
  created () {
    this.getData()
  },
  methods: {
    getData: function () {
      this.loading = true
      getSmsSetting({}).then(res => {
        if (res.code == 0) {
          this.sms = res.data
        }
      }).catch(error => {
        console.log(error)
      }).then(() => {
        this.loading = false
      })
    },
    onProtocolChange: function (val) {
      this.detail = val
    },
    submitForm: function () {
      this.$refs.smsForm.validate(valid => {
        if (valid) {
          this.btnLoading = true
          setSmsSetting({
            content: this.sms
          }).then(res => {
              if (res.code == 0) {
                this.$message.success('保存成功！')
              } else {
                this.$message.warning(res.msg ? res.msg : '保存失败！')
              }
          }).catch(error => {
              console.log(error)
          }).then(() => {
              this.btnLoading = false
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
